<template>
    <div class="topo-properties" :style="{ '--primary-color': $store.state.settings.theme }">
        <div class="topo-properties-nav">
            <template v-if="configObject != null && isLayer == false">
                <div style="text-align: center">
                    <img style="width: 120px; height: 34px" :src="configObject.style.url" v-if="configObject.style.url" crossorigin="anonymous" />
                    <!-- <img style="width: 120px; height: 34px" src="@/assets/logo/logo.png" v-else /> -->
                    111
                </div>
            </template>
        </div>
        <template v-if="configObject != null && isLayer == false">
            <div class="topo-properties-tabs">
                <div class="topo-properties-tab" @click="changeTab(0)" :class="{ 'topo-properties-tab-active': tabIndex == 0 }">布局</div>
                <div class="topo-properties-tab" @click="changeTab(1)" :class="{ 'topo-properties-tab-active': tabIndex == 1 }">通信</div>
                <div class="topo-properties-tab" @click="changeTab(2)" :class="{ 'topo-properties-tab-active': tabIndex == 2 }">图层</div>
            </div>
            <div class="topo-properties-table">
                <!-- 组件样式 -->
                <div v-show="tabIndex == 0" class="tabClass">
                    <el-collapse v-model="activeNames" accordion>
                        <el-collapse-item title="位置与尺寸" name="1">
                            <el-form class="topo-form">
                                <el-form-item label="X坐标">
                                    <el-input-number v-model="configObject.style.position.x" controls-position="right" size="small" style="width: 100%" />
                                </el-form-item>
                                <el-form-item label="Y坐标">
                                    <el-input-number v-model="configObject.style.position.y" controls-position="right" size="small" style="width: 100%" />
                                </el-form-item>
                                <el-form-item label="宽度">
                                    <el-input-number v-model="configObject.style.position.w" controls-position="right" size="small" style="width: 100%" />
                                </el-form-item>
                                <el-form-item label="高度">
                                    <el-input-number v-model="configObject.style.position.h" controls-position="right" size="small" style="width: 100%" />
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <el-collapse-item title="基本样式" name="2">
                            <el-form label-width="80px">
                                <el-form-item label="组件名称">
                                    <el-input v-model="configObject.name" size="small" />
                                </el-form-item>
                                <el-form-item label="最小值" v-if="configObject.dataBind.paramMin != undefined">
                                    <el-input-number v-model="configObject.dataBind.paramMin" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item label="最大值" v-if="configObject.dataBind.paramMax != undefined">
                                    <el-input-number v-model="configObject.dataBind.paramMax" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item label="刻度间隔" v-if="configObject.dataBind.interval != undefined">
                                    <el-input-number v-model="configObject.dataBind.interval" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item label="天气样式" v-if="configObject.style.weatherModel">
                                    <el-select v-model="configObject.style.weatherModel" placeholder="请选择" style="align: center" size="small">
                                        <el-option label="完整模式" value="完整模式" />
                                        <el-option label="简约模式" value="简约模式" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="地图主题" v-if="configObject.style.mapModel">
                                    <el-select v-model="configObject.style.mapModel" placeholder="请选择" style="align: center" size="small">
                                        <el-option label="默认主题" value="" />
                                        <el-option label="清新蓝" value="cd05a15d5004fe34a41e6b0ce9af0a6f" />
                                        <el-option label="黑夜" value="cf0162d3c456052d841e8d48e57ff679" />
                                        <el-option label="绿野仙踪" value="ed103c0342e562d1942cdba5caa572e0" />
                                        <el-option label="赛博朋克" value="1acdafb2bf7c668a7286647ee1b02b78" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="地图模式" v-if="configObject.type == 'map'">
                                    <el-select v-model="configObject.style.mapType" placeholder="请选择" style="align: center" size="small">
                                        <el-option label="普通模式" value="普通模式" />
                                        <el-option label="地球模式" value="地球模式" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="组态界面" v-if="configObject && configObject.componentShow.indexOf('组态界面') > -1">
                                    <el-select v-model="configObject.dataBind.ztPageData" clearable placeholder="请选择" size="small">
                                        <el-option :label="item.pageName" :value="item.guid + '&' + item.deviceMac" v-for="item in ztOption" :key="item.id" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="图层高度">
                                    <el-input-number v-model="configObject.style.zIndex" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item label="旋转角度">
                                    <el-input-number v-model="configObject.style.transform" controls-position="right" @change="onAngle(configObject.style.transform)" size="small" />
                                </el-form-item>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('表格') > -1">
                                    <el-form-item label="表格行数">
                                        <el-input-number v-model="configObject.style.rowNum" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="表格列数">
                                        <el-input-number v-model="configObject.style.columnNum" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="外边框颜色">
                                        <el-color-picker v-model="configObject.style.outBorderColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                    </el-form-item>
                                    <el-form-item label="外边框样式">
                                        <el-select v-model="configObject.style.outBorderStyle" placeholder="请选择" style="align: center" size="small">
                                            <el-option label="无边框" value="none" />
                                            <el-option label="实线" value="solid" />
                                            <el-option label="虚线" value="dashed" />
                                            <el-option label="点状虚线" value="dotted" />
                                            <el-option label="双实线" value="double" />
                                            <el-option label="3D 凹槽" value="groove" />
                                            <el-option label="3D 垄状" value="ridge" />
                                            <el-option label="3D 嵌入" value="inset" />
                                            <el-option label="3D 突出" value="outset" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="外边框宽度">
                                        <el-input-number v-model="configObject.style.outBorderWidth" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="内边框颜色">
                                        <el-color-picker v-model="configObject.style.innerBorderColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                    </el-form-item>
                                    <el-form-item label="内边框样式">
                                        <el-select v-model="configObject.style.innerBorderStyle" placeholder="请选择" style="align: center" size="small">
                                            <el-option label="无边框" value="none" />
                                            <el-option label="实线" value="solid" />
                                            <el-option label="虚线" value="dashed" />
                                            <el-option label="点状虚线" value="dotted" />
                                            <el-option label="双实线" value="double" />
                                            <el-option label="3D 凹槽" value="groove" />
                                            <el-option label="3D 垄状" value="ridge" />
                                            <el-option label="3D 嵌入" value="inset" />
                                            <el-option label="3D 突出" value="outset" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="内边框宽度">
                                        <el-input-number v-model="configObject.style.innerBorderWidth" controls-position="right" size="small" />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('摄像头') > -1">
                                    <!-- <el-form-item label="设备序列号">
                                      <el-input v-model="configObject.dataBind.serialNumber" placeholder="萤石云控制台获取" size="small"/>
                                    </el-form-item>
                                    <el-form-item label="通道号">
                                      <el-input v-model="configObject.dataBind.channelNumber" placeholder="萤石云控制台获取" size="small"/>
                                    </el-form-item>
                                    <el-form-item label="accessToken">
                                      <el-input v-model="configObject.dataBind.accessToken" placeholder="萤石云控制台获取" size="small"/>
                                    </el-form-item> -->
                                    <el-form-item label="视频名称">
                                        <el-select v-model="devicesxt" placeholder="请选择视频名称" size="small" @change="handleChangedevsxt(devicesxt)">
                                            <!--                      <el-option :label="item.deviceName" :value="item.id" :key="item.id"
                                                                             v-for="item in videoOption" />-->
                                            <el-option v-for="item in videoOption" :key="item.serialNumber" :label="item.deviceName" :value="item.serialNumber"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </template>
                                <el-form-item label="视频地址" v-if="(configObject.componentShow && configObject.componentShow.indexOf('直播视频') > -1) || configObject.componentShow.indexOf('摄像头') > -1">
                                    <el-input v-model="configObject.videoUrl" placeholder="Flv格式直播流" size="small" />
                                </el-form-item>
                                <el-form-item label="视频地址" v-if="configObject.componentShow && configObject.componentShow.indexOf('通用视频') > -1">
                                    <el-input v-model="configObject.videoUrl" placeholder="MP4视频地址" size="small" />
                                </el-form-item>
                                <el-form-item label="视频地址" v-if="configObject.componentShow && configObject.componentShow.indexOf('直播视频2') > -1">
                                    <el-input v-model="configObject.videoUrl" placeholder="视频地址" size="small" />
                                </el-form-item>
                                <el-form-item label="封面地址" v-if="configObject.componentShow && configObject.componentShow.indexOf('通用视频') > -1">
                                    <el-input v-model="configObject.imageUrl" placeholder="视频封面地址" size="small" />
                                </el-form-item>
                                <el-form-item label="三维场景" v-if="configObject.componentShow && configObject.componentShow.indexOf('三维') > -1">
                                    <el-select v-model="configObject.imageUrl" placeholder="请联系商务人员获取" @change="selectModelChange" size="small">
                                        <el-option :label="item.modelName" :value="item.imageUrl" :key="item.id" v-for="item in ztModelOption" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="背景颜色">
                                    <el-color-picker v-model="configObject.style.backColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                </el-form-item>
                                <el-form-item label="透明度">
                                    <el-input-number v-model="configObject.style.opacity" controls-position="right" placeholder="0.5" size="small" :step="0.1" :min="0.1" :max="1" />
                                </el-form-item>
                                <el-form-item label="边框圆角">
                                    <el-input-number v-model="configObject.style.borderRadius" controls-position="right" placeholder="10" size="small" />
                                </el-form-item>
                                <el-form-item label="阴影长度">
                                    <el-input-number v-model="configObject.style.boxShadowWidth" controls-position="right" placeholder="10" size="small" />
                                </el-form-item>
                                <el-form-item label="阴影颜色">
                                    <el-color-picker v-model="configObject.style.boxShadowColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                </el-form-item>
                                <!--                                <el-form-item label="统计类型" v-if="configObject.componentShow && configObject.componentShow.indexOf('设备统计') > -1">
                                    <el-select v-model="configObject.style.pieType" placeholder="请选择" style="align: center" size="small">
                                        <el-option label="设备状态" value="设备状态" />
                                        <el-option label="报警状态" value="报警状态" />
                                        <el-option label="工单状态" value="工单状态" />
                                    </el-select>
                                </el-form-item>-->
                                <el-form-item label="图片选择" v-if="configObject.style.url != undefined">
                                    <img
                                        :src="configObject.style.url == '' ? '@/views/zutai/images/lunbo.png' : configObject.style.url"
                                        class="avatar"
                                        @click="handleClick('图片路径')"
                                        style="align: center"
                                        crossorigin="anonymous"
                                    />
                                </el-form-item>
                                <el-form-item label="文字" v-if="configObject.style.text != undefined">
                                    <el-input v-model="configObject.style.text" size="small" />
                                </el-form-item>
                                <el-form-item label="对齐方式" v-if="configObject.style.textAlign">
                                    <el-select v-model="configObject.style.textAlign" placeholder="请选择" style="align: center" size="small">
                                        <el-option label="居左" value="left" />
                                        <el-option label="居中" value="center" />
                                        <el-option label="居右" value="right" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="字体类型" v-if="configObject.style.fontFamily">
                                    <el-select v-model="configObject.style.fontFamily" placeholder="请选择" style="align: center" size="small">
                                        <el-option :label="item" :value="item" v-for="item in fontFamilyOptions" :key="item" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="字体大小" v-if="configObject.style.fontSize != undefined">
                                    <el-input-number v-model="configObject.style.fontSize" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item label="字体粗细" v-if="configObject.style.fontWeight != undefined">
                                    <el-input-number v-model="configObject.style.fontWeight" controls-position="right" :step="100" :min="100" :max="700" size="small" />
                                </el-form-item>
                                <el-form-item label="滤镜/阴影" v-if="configObject.componentShow && configObject.componentShow.indexOf('滤镜渲染') > -1">
                                    <el-radio-group v-model="configObject.style.isFilter" size="small">
                                        <el-radio :label="true">滤镜</el-radio>
                                        <el-radio :label="false">阴影</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="组件颜色" v-if="configObject.componentShow && configObject.componentShow.indexOf('组件颜色') > -1">
                                    <el-color-picker v-model="configObject.style.foreColor" :predefine="predefineColors" color-format="hex" size="small" />
                                </el-form-item>
                                <el-form-item label="组件显隐">
                                    <el-radio-group v-model="configObject.style.visible" size="small">
                                        <el-radio :label="true">显示</el-radio>
                                        <el-radio :label="false">隐藏</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('轮播图') > -1">
                                    <el-form-item label="轮播个数">
                                        <el-input-number v-model="configObject.style.carouselNum" controls-position="right" @change="carouselChange(configObject.style)" size="small" />
                                    </el-form-item>
                                    <el-form-item label="触发方式">
                                        <el-select v-model="configObject.style.trigger" placeholder="请选择" style="align: center" size="small">
                                            <el-option label="点击" value="click" />
                                            <el-option label="自动" value="" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="轮播间隔">
                                        <el-input-number v-model="configObject.style.interval" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="轮播类型">
                                        <el-select v-model="configObject.style.type" placeholder="请选择" style="align: center" size="small">
                                            <el-option label="默认" value="" />
                                            <el-option label="卡片" value="card" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="轮播图片" v-if="configObject.style.carouselNum > 0">
                                        <img
                                            :src="require('@/' + item)"
                                            class="avatar"
                                            @click="handleClick('轮播图片-' + index)"
                                            v-for="(item, index) in configObject.style.carouselImageList"
                                            crossorigin="anonymous"
                                            :key="index"
                                        />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('跑马灯') > -1">
                                    <el-form-item label="轮播时间">
                                        <el-input-number v-model="configObject.style.carouselTime" controls-position="right" size="small" />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('远程网页') > -1">
                                    <el-form-item label="远程网页">
                                        <el-input v-model="configObject.modelUrl" type="textarea" />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('变量日志') > -1">
                                    <el-form-item label="时间跨度(时)" v-if="configObject.style.carouselNum > 0">
                                        <el-input-number v-model="configObject.dataBind.timeNum" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="时间间隔(分)" v-if="configObject.style.carouselNum > 0">
                                        <el-input-number v-model="configObject.dataBind.timeInterval" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="X轴间隔" v-if="configObject.style.carouselNum > 0">
                                        <el-input-number v-model="configObject.dataBind.xInterval" controls-position="right" size="small" />
                                    </el-form-item>
                                </template>
                                <el-form-item label="代码视图" v-if="configObject.componentShow && configObject.componentShow.indexOf('自定义echarts') > -1">
                                    <i class="el-icon-edit" @click="echartClick">编辑</i>
                                </el-form-item>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('地图文件') > -1">
                                    <el-form-item label="地图选择">
                                        <el-select v-model="configObject.dataBind.mapAddress" placeholder="请选择" filterable size="small">
                                            <el-option label="安徽" value="安徽" />
                                            <el-option label="澳门" value="澳门" />
                                            <el-option label="北京" value="北京" />
                                            <el-option label="重庆" value="重庆" />
                                            <el-option label="福建" value="福建" />
                                            <el-option label="甘肃" value="甘肃" />
                                            <el-option label="广东" value="广东" />
                                            <el-option label="广西" value="广西" />
                                            <el-option label="贵州" value="贵州" />
                                            <el-option label="海南" value="海南" />
                                            <el-option label="河北" value="河北" />
                                            <el-option label="黑龙江" value="黑龙江" />
                                            <el-option label="河南" value="河南" />
                                            <el-option label="湖北" value="湖北" />
                                            <el-option label="湖南" value="湖南" />
                                            <el-option label="江苏" value="江苏" />
                                            <el-option label="江西" value="江西" />
                                            <el-option label="吉林" value="吉林" />
                                            <el-option label="辽宁" value="辽宁" />
                                            <el-option label="内蒙古" value="内蒙古" />
                                            <el-option label="宁夏" value="宁夏" />
                                            <el-option label="青海" value="青海" />
                                            <el-option label="山东" value="山东" />
                                            <el-option label="上海" value="上海" />
                                            <el-option label="山西" value="山西" />
                                            <el-option label="四川" value="四川" />
                                            <el-option label="台湾" value="台湾" />
                                            <el-option label="天津" value="天津" />
                                            <el-option label="香港" value="香港" />
                                            <el-option label="新疆" value="新疆" />
                                            <el-option label="西藏" value="西藏" />
                                            <el-option label="云南" value="云南" />
                                            <el-option label="浙江" value="浙江" />
                                            <el-option label="自定义" value="自定义" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="地图数据地址" v-if="configObject.dataBind.mapAddress == '自定义'">
                                        <el-input v-model="configObject.dataBind.mapUrl" placeholder="地图数据地址" size="small" />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('悬浮提示') > -1">
                                    <el-form-item label="悬浮提示">
                                        <el-radio v-model="configObject.style.tipDIs" :label="true" size="small">开启</el-radio>
                                        <el-radio v-model="configObject.style.tipDIs" :label="false" size="small">关闭</el-radio>
                                    </el-form-item>
                                    <el-form-item label="悬浮模式">
                                        <el-radio v-model="configObject.style.tipShow" :label="true" size="small">长显</el-radio>
                                        <el-radio v-model="configObject.style.tipShow" :label="false" size="small">短显</el-radio>
                                    </el-form-item>
                                    <el-form-item label="悬浮位置">
                                        <el-select v-model="configObject.style.placement" placeholder="请选择" style="align: center" size="small">
                                            <el-option label="上边" value="top" />
                                            <el-option label="上左" value="top-start" />
                                            <el-option label="上右" value="top-end" />
                                            <el-option label="下边" value="bottom" />
                                            <el-option label="下左" value="bottom-start" />
                                            <el-option label="下右" value="bottom-end" />
                                            <el-option label="左边" value="left" />
                                            <el-option label="左上" value="left-start" />
                                            <el-option label="左下" value="left-end" />
                                            <el-option label="右边" value="right" />
                                            <el-option label="右上" value="right-start" />
                                            <el-option label="右下" value="right-end" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="悬浮样式">
                                        <el-select v-model="configObject.style.effect" placeholder="请选择" style="align: center" size="small">
                                            <el-option label="暗黑" value="dark" />
                                            <el-option label="明亮" value="light" />
                                        </el-select>
                                    </el-form-item>
                                </template>
                                <el-form-item label="线条宽度" v-if="configObject.style.lineWidth != undefined">
                                    <el-input-number v-model="configObject.style.lineWidth" controls-position="right" size="small" />
                                </el-form-item>
                                <template v-if="configObject.componentShow && configObject.componentShow.indexOf('水流') > -1">
                                    <el-form-item label="线条高度">
                                        <el-input-number v-model="configObject.style.lineHeight" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="线条间隔">
                                        <el-input-number v-model="configObject.style.lineInterval" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="线条形状">
                                        <el-select v-model="configObject.style.lineType" placeholder="请选择" style="align: center" size="small">
                                            <el-option label="矩形" value="butt" />
                                            <el-option label="椭圆" value="round" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="流动方向">
                                        <el-select v-model="configObject.style.animations" placeholder="请选择" style="align: center" size="small">
                                            <el-option label="正向" value="正向" />
                                            <el-option label="反向" value="反向" />
                                            <el-option label="静止" value="静止" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="流动速度">
                                        <el-select v-model="configObject.style.speed" placeholder="请选择" style="align: center" size="small">
                                            <el-option label="快" value="快" />
                                            <el-option label="中" value="中" />
                                            <el-option label="慢" value="慢" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="锚点个数">
                                        <el-input-number v-model="configObject.style.anchorPointNum" controls-position="right" size="small" />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject.style.waterShape">
                                    <el-form-item label="液位形状">
                                        <el-select v-model="configObject.style.waterShape" placeholder="请选择" style="align: center" size="small">
                                            <el-option label="容器" value="container" />
                                            <el-option label="圆形" value="circle" />
                                            <el-option label="矩形" value="rect" />
                                            <el-option label="圆角矩形" value="roundRect" />
                                            <el-option label="三角形" value="triangle" />
                                            <el-option label="菱形" value="diamond" />
                                            <el-option label="热气球形" value="pin" />
                                            <el-option label="倒三角形" value="arrow" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="波浪颜色">
                                        <el-color-picker v-model="configObject.style.waterColor" show-alpha :predefine="predefineColors"></el-color-picker>
                                    </el-form-item>
                                    <el-form-item label="字体大小">
                                        <el-input-number v-model="configObject.style.waterFontSize" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="边框宽度">
                                        <el-input-number v-model="configObject.style.waterBorderWidth" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="边框颜色">
                                        <el-color-picker v-model="configObject.style.waterBorderColor" show-alpha :predefine="predefineColors" color-format="hex" style="align: center" size="small" />
                                    </el-form-item>
                                    <el-form-item label="边框背景色">
                                        <el-color-picker v-model="configObject.style.waterBackColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                    </el-form-item>
                                </template>
                                <template v-if="configObject && configObject.componentShow.indexOf('高德地图') > -1">
                                    <el-form-item label="地图主题">
                                        <el-select v-model="configObject.style.mapModel" placeholder="请选择" style="align: center" size="small">
                                            <el-option label="标准" value="normal" />
                                            <el-option label="幻影黑" value="dark" />
                                            <el-option label="月光银" value="light" />
                                            <el-option label="远山黛" value="whitesmoke" />
                                            <el-option label="草色青" value="fresh" />
                                            <el-option label="雅士灰" value="grey" />
                                            <el-option label="涂鸦" value="graffiti" />
                                            <el-option label="马卡龙" value="macaron" />
                                            <el-option label="靛青蓝" value="blue" />
                                            <el-option label="极夜蓝" value="darkblue" />
                                            <el-option label="极夜蓝" value="darkblue" />
                                            <el-option label="酱籽" value="wine" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="地图元素">
                                        <el-checkbox-group v-model="configObject.style.mapContent" size="small">
                                            <el-checkbox label="bg">背景</el-checkbox>
                                            <el-checkbox label="point">标识</el-checkbox>
                                            <el-checkbox label="road">道路</el-checkbox>
                                            <el-checkbox label="building">建筑</el-checkbox>
                                        </el-checkbox-group>
                                    </el-form-item>
                                    <el-form-item label="地图模式">
                                        <el-radio-group v-model="configObject.style.mapType" size="small">
                                            <el-radio label="2D">2D</el-radio>
                                            <el-radio label="3D">3D</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="初始缩放">
                                        <el-input-number v-model="configObject.style.zoom" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="俯仰角">
                                        <el-input-number v-model="configObject.style.pitch" controls-position="right" size="small" />
                                    </el-form-item>
                                    <el-form-item label="天空色">
                                        <el-color-picker v-model="configObject.style.skyColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                                    </el-form-item>
                                </template>
                            </el-form>
                        </el-collapse-item>
                        <el-collapse-item title="模型样式" name="3" v-if="configObject.componentShow && configObject.componentShow.indexOf('3D模型') > -1">
                            <!-- 3d模型样式开始 -->
                            <template>
                                <el-form class="topo-form">
                                    <el-form-item label="模型上传">
                                        <el-button size="small" icon="el-icon-upload2" circle @click="modelUploadClick"></el-button>
                                    </el-form-item>
                                    <el-form-item label="交互控制">
                                        <el-checkbox v-model="configObject.loader.enablePan">右键拖动</el-checkbox>
                                        <el-checkbox v-model="configObject.loader.enableZoom">模型缩放</el-checkbox>
                                        <el-checkbox v-model="configObject.loader.enableRotate">模型旋转</el-checkbox>
                                        <el-checkbox v-model="configObject.loader.autoPlay">自动播放</el-checkbox>
                                        <el-checkbox v-model="configObject.loader.authRoTate">自动旋转</el-checkbox>
                                        <el-checkbox v-model="configObject.loader.showFps">FPS显示</el-checkbox>
                                    </el-form-item>
                                    <div v-for="(item, index) in configObject.loader.position" style="width: 250px; padding: 15px" :key="index">
                                        <span>坐标-{{ index + 1 }}</span>
                                        <el-form-item label="x坐标">
                                            <el-slider v-model="item.x" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item label="y坐标">
                                            <el-slider v-model="item.y" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item label="z坐标">
                                            <el-slider v-model="item.z" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                    </div>
                                    <div v-for="(item, index) in configObject.loader.rotation" style="width: 250px; padding: 15px" :key="index">
                                        <span>旋转-{{ index + 1 }}</span>
                                        <el-form-item label="x旋转">
                                            <el-slider v-model="item.x" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item label="y旋转">
                                            <el-slider v-model="item.y" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item label="z旋转">
                                            <el-slider v-model="item.z" :min="-10" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                    </div>
                                    <div v-for="(item, index) in configObject.loader.scale" style="width: 250px; padding: 15px" :key="index">
                                        <span>缩放-{{ index + 1 }}</span>
                                        <el-form-item label="x缩放">
                                            <el-slider v-model="item.x" :min="0.1" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item label="y缩放">
                                            <el-slider v-model="item.y" :min="0.1" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                        <el-form-item label="z缩放">
                                            <el-slider v-model="item.z" :min="0.1" :max="10" :step="0.1"></el-slider>
                                        </el-form-item>
                                    </div>
                                </el-form>
                            </template>
                        </el-collapse-item>
                        <!-- 滚动表格开始 -->
                        <el-collapse-item title="表格样式" name="4" v-if="configObject.componentShow && configObject.componentShow.indexOf('轮播表') > -1">
                            <el-form class="topo-form">
                                <el-form-item label="行数">
                                    <el-input-number v-model="configObject.style.rowNum" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item label="字体颜色">
                                    <el-color-picker v-model="configObject.style.foreColor" show-alpha :predefine="predefineColors" color-format="hex" style="align: center" size="small" />
                                </el-form-item>
                                <el-form-item label="表头颜色">
                                    <el-color-picker v-model="configObject.style.headerBGC" show-alpha :predefine="predefineColors" color-format="hex" style="align: center" size="small" />
                                </el-form-item>
                                <el-form-item label="奇数行颜色">
                                    <el-color-picker v-model="configObject.style.oddRowBGC" show-alpha :predefine="predefineColors" color-format="hex" style="align: center" size="small" />
                                </el-form-item>
                                <el-form-item label="偶数行颜色">
                                    <el-color-picker v-model="configObject.style.evenRowBGC" show-alpha :predefine="predefineColors" color-format="hex" style="align: center" size="small" />
                                </el-form-item>
                                <el-form-item label="轮播间隔">
                                    <el-input-number v-model="configObject.style.waitTime" controls-position="right" :step="500" :min="1000" size="small" />
                                </el-form-item>
                                <el-form-item label="表头高度">
                                    <el-input-number v-model="configObject.style.headerHeight" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item label="表头宽度">
                                    <el-input-number v-model="configObject.style.columnWidth" controls-position="right" size="small" />
                                </el-form-item>
                                <el-form-item label="行号显示">
                                    <el-radio-group v-model="configObject.style.index" size="small">
                                        <el-radio :label="true">显示</el-radio>
                                        <el-radio :label="false">隐藏</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="轮播方式">
                                    <el-radio-group v-model="configObject.style.carousel" size="small">
                                        <el-radio label="single">行</el-radio>
                                        <el-radio label="page">页</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                        <!-- 滚动表格结束 -->
                    </el-collapse>
                </div>
                <!-- 数据绑定 -->
                <div v-show="tabIndex == 1" class="tab-index-2">
                    <div style="margin-bottom: 5px" v-if="configObject.componentShow && configObject.componentShow.indexOf('参数绑定') > -1">
                        <el-tabs v-model="configObject.dataBind.activeName" v-if="configObject.componentShow && configObject.componentShow.indexOf('设备状态') > -1">
                            <el-tab-pane label="变量状态" name="变量状态"></el-tab-pane>
                            <el-tab-pane label="设备状态" name="设备状态"></el-tab-pane>
                        </el-tabs>
                        <span style="line-height: 50px; font-weight: 700; padding-left: 20px" v-else>变量选择</span>
                        <el-select
                            v-model="configObject.dataBind.imei"
                            filterable
                            placeholder="请选择设备"
                            style="width: 280px; margin-left: 20px; margin-top: 10px"
                            v-if="configObject.dataBind.activeName == '设备状态'"
                            @visible-change="deviceChange"
                        >
                            <el-option :label="item.deviceName" :value="item.deviceMac" v-for="item in bDeviceZtBindList" :key="item.id"></el-option>
                        </el-select>
                        <el-input placeholder="请选择变量" v-model="configObject.dataBind.paramName" readonly size="small" v-else>
                            <el-button slot="append" @click="selectVariable('参数绑定')">选择</el-button>
                        </el-input>
                        <el-divider></el-divider>
                    </div>
                    <div style="margin-bottom: 5px" v-if="configObject.componentShow && configObject.componentShow.indexOf('Snmp协议Oid') > -1">
                        <el-input placeholder="请选择oid" v-model="configObject.dataBind.oidName" readonly size="small">
                            <el-button slot="append" @click="selectOid()">选择</el-button>
                        </el-input>
                    </div>
                    <!-- 参数绑定结束 -->
                    <!-- echarts图表地址开始 -->
                    <div v-if="configObject.componentShow && (configObject.componentShow.indexOf('自定义echarts') > -1 || configObject.componentShow.indexOf('地图文件') > -1)">
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700; margin-top: 5px">
                            <span>数据引擎地址</span>
                        </div>
                        <div style="margin-bottom: 10px">
                            <el-button @click="dialogVisibleInterface = true" style="width: 100%" type="primary" size="mini">编辑配置</el-button>
                        </div>
                        <div>
                            <el-button @click="sendHttpRequest" style="width: 100%" type="success" size="mini">发送请求</el-button>
                        </div>
                        <!-- <div style="margin-bottom:20px;">
                        <el-input v-model="configObject.dataBind.echartUrl" type="textarea" :autosize="{ minRows: 5 }"
                          placeholder="目前仅支持GET请求" />
                      </div> -->
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700; margin-top: 20px">
                            <span>成功响应示例</span>
                        </div>
                        <div>
                            <el-input type="textarea" :autosize="{ minRows: 5 }" placeholder="响应数据" v-model="echartData"></el-input>
                        </div>
                        <div style="margin-top: 10px" v-if="configObject.dataBind.echartUrl">
                            <el-button plain type="success" icon="el-icon-search" @click="echartHttpClick(configObject.dataBind.echartUrl)" style="width: 300px">请求</el-button>
                        </div>
                    </div>
                    <!-- echarts图表地址结束 -->
                    <!--事件点击开始 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('单击') > -1">
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700"><span>事件</span></div>
                        <div style="margin-bottom: 20px">
                            <el-checkbox v-model="configObject.dataBind.djAction">自定义</el-checkbox>
                            <el-button plain size="mini" icon="el-icon-edit" style="float: right" :disabled="!configObject.dataBind.djAction" @click="configClick('单击')">设置</el-button>
                        </div>
                    </div>
                    <!-- 事件点击结束 -->

                    <!-- 新版线条流动判断开始 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('水流') > -1">
                        <div style="line-height: 20px; font-weight: 700"><span>流动</span></div>
                        <div style="margin-bottom: 10px; margin-top: 10px">
                            <el-row :gutter="10">
                                <el-col :span="4" style="width: auto; margin-top: 5px"><span>流动条件</span></el-col>
                                <el-col :span="10">
                                    <el-select v-model="configObject.dataAction.paramJudge" clearable placeholder="请选择" size="small">
                                        <el-option label=">" value="大于" />
                                        <el-option label=">=" value="大于等于" />
                                        <el-option label="=" value="等于" />
                                        <el-option label="<=" value="小于等于" />
                                        <el-option label="<" value="小于" />
                                        <el-option label="!=" value="不等于" />
                                    </el-select>
                                </el-col>
                                <el-col :span="8">
                                    <el-input-number size="small" style="width: 100px" v-model="configObject.dataAction.paramJudgeData" clearable placeholder="请输入" controls-position="right"></el-input-number>
                                </el-col>
                            </el-row>
                        </div>
                        <div style="margin-bottom: 10px">
                            <span style="margin-right: 10px">流动方向</span>
                            <el-radio v-model="configObject.dataAction.direction" label="正向"><span>正</span></el-radio>
                            <el-radio v-model="configObject.dataAction.direction" label="反向"><span>反</span></el-radio>
                        </div>
                        <div style="margin-bottom: 10px; margin-top: 10px">
                            <el-row :gutter="10">
                                <el-col :span="4" style="width: auto; margin-top: 5px"><span>流动条件</span></el-col>
                                <el-col :span="10">
                                    <el-select v-model="configObject.dataAction.paramJudge01" clearable placeholder="请选择" size="small">
                                        <el-option label=">" value="大于" />
                                        <el-option label=">=" value="大于等于" />
                                        <el-option label="=" value="等于" />
                                        <el-option label="<=" value="小于等于" />
                                        <el-option label="<" value="小于" />
                                        <el-option label="!=" value="不等于" />
                                    </el-select>
                                </el-col>
                                <el-col :span="8">
                                    <el-input-number size="small" style="width: 100px" v-model="configObject.dataAction.paramJudgeData01" clearable placeholder="请输入" controls-position="right"></el-input-number>
                                </el-col>
                            </el-row>
                        </div>
                        <div style="margin-bottom: 10px">
                            <span style="margin-right: 10px">流动方向</span>
                            <el-radio v-model="configObject.dataAction.direction01" label="正向"><span>正</span></el-radio>
                            <el-radio v-model="configObject.dataAction.direction01" label="反向"><span>反</span></el-radio>
                        </div>
                    </div>
                    <!-- 线条流动判断结束 -->
                    <!-- 闪烁、旋转、显隐动画 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('动画') > -1">
                        <el-divider></el-divider>
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700"><span>动画</span></div>
                        <div style="margin-bottom: 20px">
                            <el-checkbox v-model="configObject.dataBind.xyAction">显隐</el-checkbox>
                            <el-button plain size="mini" icon="el-icon-edit" style="float: right" :disabled="!configObject.dataBind.xyAction" @click="configClick('显隐')">设置</el-button>
                        </div>
                        <div style="margin-bottom: 20px">
                            <el-checkbox v-model="configObject.dataBind.xzAction">旋转</el-checkbox>
                            <el-button plain size="mini" icon="el-icon-edit" style="float: right" :disabled="!configObject.dataBind.xzAction" @click="configClick('旋转')">设置</el-button>
                        </div>
                        <div style="margin-bottom: 20px">
                            <el-checkbox v-model="configObject.dataBind.ssAction">闪烁</el-checkbox>
                            <el-button plain size="mini" icon="el-icon-edit" style="float: right" :disabled="!configObject.dataBind.ssAction" @click="configClick('闪烁')">设置</el-button>
                        </div>
                        <div style="margin-bottom: 20px">
                            <el-checkbox v-model="configObject.dataBind.hdAction">滑动</el-checkbox>
                            <el-button plain size="mini" icon="el-icon-edit" style="float: right" :disabled="!configObject.dataBind.hdAction" @click="configClick('滑动')">设置</el-button>
                        </div>
                    </div>
                    <!-- 状态开关开始 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('状态开关') > -1" style="margin-top: 10px">
                        <el-divider></el-divider>
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700" v-if="configObject.dataBind.activeName == '变量状态'">
                            <span>状态开关</span>
                            <i class="el-icon-plus" style="margin-right: 10px; margin-left: 10px; font-size: 18px" @click="addSwitch"></i>
                            <i class="el-icon-delete" @click="deleteSwitch" style="font-size: 18px"></i>
                            <div style="margin-top: 10px">
                                <el-row :gutter="5" style="margin-bottom: 10px" v-for="(item, index) in configObject.dataBind.stateList" :key="index">
                                    <el-col :span="8">
                                        <el-select v-model="item.paramCondition" clearable placeholder="" size="small">
                                            <el-option label=">" value="大于" />
                                            <el-option label=">=" value="大于等于" />
                                            <el-option label="=" value="等于" />
                                            <el-option label="<=" value="小于等于" />
                                            <el-option label="<" value="小于" />
                                            <el-option label="!=" value="不等于" />
                                        </el-select>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-input-number size="small" style="width: auto" v-model="item.paramData" clearable placeholder="请输入" :controls="false"></el-input-number>
                                    </el-col>
                                    <el-col :span="4">
                                        <img v-if="item.imageUrl" :src="item.imageUrl" @click="handleClick('状态开关-' + item.id)" class="avatar-switch" crossorigin="anonymous" />
                                        <i v-else class="el-icon-plus avatar-uploader-icon-switch" @click="handleClick('状态开关-' + item.id)"></i>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-color-picker v-model="item.foreColor" :predefine="predefineColors" color-format="hex" />
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <!-- 状态开关结束 -->
                        <!-- 设备状态判断在线、离线、报警 -->
                        <div v-if="configObject.dataBind.activeName == '设备状态'">
                            <div>
                                <span>设备离线</span>
                                <img v-if="this.configObject.dataBind.shutImageUrl" :src="configObject.dataBind.shutImageUrl" class="bgAvatar" @click="handleClick('开关状态(关)')" crossorigin="anonymous" />
                                <i v-else class="el-icon-plus avatar-uploader-icon" @click="handleClick('开关状态(关)')"></i>
                            </div>
                            <div>
                                <span>设备在线</span>
                                <img v-if="this.configObject.dataBind.openImageUrl" :src="configObject.dataBind.openImageUrl" class="bgAvatar" @click="handleClick('开关状态(开)')" crossorigin="anonymous" />
                                <i v-else class="el-icon-plus avatar-uploader-icon" @click="handleClick('开关状态(开)')"></i>
                            </div>
                            <div>
                                <span>设备报警</span>
                                <img v-if="this.configObject.dataBind.warnImageUrl" :src="configObject.dataBind.warnImageUrl" class="bgAvatar" @click="handleClick('开关状态(报警)')" crossorigin="anonymous" />
                                <i v-else class="el-icon-plus avatar-uploader-icon" @click="handleClick('开关状态(报警)')"></i>
                            </div>
                        </div>
                    </div>
                    <!-- 状态字段开始 -->
                    <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700" v-if="configObject.componentShow && configObject.componentShow.indexOf('状态字段') > -1">
                        <span>状态字段</span>
                        <i class="el-icon-plus" style="margin-right: 10px; margin-left: 10px; font-size: 18px" @click="addText"></i>
                        <i class="el-icon-delete" @click="deleteText" style="font-size: 18px"></i>
                        <div style="margin-top: 10px">
                            <el-row :gutter="5" style="margin-bottom: 10px" v-for="(item, index) in configObject.dataBind.stateTextList" :key="index">
                                <el-col :span="6">
                                    <el-select v-model="item.paramCondition" clearable placeholder="" size="small">
                                        <el-option label=">" value="大于" />
                                        <el-option label=">=" value="大于等于" />
                                        <el-option label="=" value="等于" />
                                        <el-option label="<=" value="小于等于" />
                                        <el-option label="<" value="小于" />
                                        <el-option label="!=" value="不等于" />
                                    </el-select>
                                </el-col>
                                <el-col :span="6">
                                    <el-input-number size="small" style="width: auto" v-model="item.paramData" clearable placeholder="" :controls="false"></el-input-number>
                                </el-col>
                                <el-col :span="6">
                                    <el-input v-model="item.paramText" size="small" placeholder="" />
                                </el-col>
                                <el-col :span="6">
                                    <el-color-picker v-model="item.foreColor" :predefine="predefineColors" color-format="hex" />
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <!-- 状态字段结束 -->
                    <!-- 填充颜色开始 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('组件填充') > -1">
                        <span style="line-height: 50px; font-weight: 700; margin-top: 20px">填充颜色</span>
                        <i class="el-icon-plus" style="margin-right: 10px; margin-left: 10px; font-size: 18px" @click="addSwitch"></i>
                        <i class="el-icon-delete" @click="deleteSwitch" style="font-size: 18px"></i>
                        <div style="margin-top: 10px">
                            <el-row :gutter="5" style="margin-bottom: 10px" v-for="(item, index) in configObject.dataBind.stateList" :key="index">
                                <el-col :span="10">
                                    <el-select v-model="item.paramCondition" clearable placeholder="请选择" size="small">
                                        <el-option label=">" value="大于" />
                                        <el-option label=">=" value="大于等于" />
                                        <el-option label="=" value="等于" />
                                        <el-option label="<=" value="小于等于" />
                                        <el-option label="<" value="小于" />
                                        <el-option label="!=" value="不等于" />
                                    </el-select>
                                </el-col>
                                <el-col :span="7">
                                    <el-input-number size="small" style="width: auto" v-model="item.paramData" clearable placeholder="请输入" :controls="false"></el-input-number>
                                </el-col>
                                <el-col :span="7">
                                    <el-color-picker v-model="item.foreColor" :predefine="predefineColors" color-format="hex" />
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <!-- 填充颜色结束 -->
                    <!-- 天气组件开始 -->
                    <div v-if="configObject.componentShow && configObject.componentShow.indexOf('天气') > -1">
                        <el-divider></el-divider>
                        <div style="margin-bottom: 10px; line-height: 20px; font-weight: 700"><span>位置</span></div>
                        <div>
                            <span style="line-height: 50px; font-weight: 700; margin-right: 10px">省</span>
                            <span v-show="false">{{ provinceCode }}</span>
                            <el-select v-model="configObject.dataBind.provinceCode" placeholder="请选择省" clearable size="small" filterable @change="provinceChange">
                                <el-option v-for="pro in provinceList" :key="pro.provinceZh" :label="pro.provinceZh" :value="pro.provinceZh"></el-option>
                            </el-select>
                        </div>
                        <div>
                            <span style="line-height: 50px; font-weight: 700; margin-right: 10px">市</span>
                            <el-select v-model="configObject.dataBind.cityCode" placeholder="请选择市" clearable size="small" filterable @change="cityChange">
                                <el-option v-for="city in cityList" :key="city.leaderZh" :label="city.leaderZh" :value="city.leaderZh"></el-option>
                            </el-select>
                        </div>
                        <div>
                            <span style="line-height: 50px; font-weight: 700; margin-right: 10px">区</span>
                            VR
                            <el-select v-model="configObject.dataBind.districtCode" placeholder="请选择区" clearable size="small" filterable>
                                <el-option v-for="dis in districtList" :key="dis.id" :label="dis.cityZh" :value="dis.id"></el-option>
                            </el-select>
                        </div>
                        <div style="color: #ffb527">
                            <span>温馨提示：</span>
                        </div>
                        <div>
                            <i class="el-icon-warning-outline"></i>
                            <span>同一组态界面只能存在一个天气组件</span>
                        </div>
                    </div>
                    <!-- 天气组件结束 -->
                    <!-- VR绑定数据开始 -->
                    <div v-for="(item, index) in configObject.style.markers" :key="index">
                        <el-row style="margin-top: 10px" v-if="configObject.componentShow && configObject.componentShow.indexOf('VR') > -1">
                            <el-col :span="20">
                                <el-input placeholder="请选择变量" v-model="item.dataBind.paramName" readonly size="small">
                                    <el-button slot="append" @click="selectVariable('VR参数绑定', item)">选择</el-button>
                                </el-input>
                            </el-col>
                            <el-col :span="4">
                                <img :src="item.vrUrl" class="vrAvatar" @click="handleClick('图片锚点', item)" crossorigin="anonymous" />
                            </el-col>
                        </el-row>
                    </div>
                    <!-- VR绑定数据结束 -->
                </div>
                <!-- 画布图层 -->
                <div v-show="tabIndex == 2">
                    <div
                        v-for="(item, index) in topoData.components"
                        class="tab-index-3"
                        :key="index"
                        v-show="!item.isDelete"
                        :style="{ backgroundColor: configObject.identifier == item.identifier ? '#ecf5ff' : '', color: configObject.identifier == item.identifier ? '#409EFF' : '' }"
                    >
                        <img :src="item.icon" style="width: 15px; height: 15px; margin-right: 3px" v-if="item.icon" crossorigin="anonymous" />
                        <q-icon :name="item.qIcon" size="18px" v-else-if="item.qIcon" style="margin-right: 3px; margin-left: -3px" />
                        <img :src="item.style.url" style="width: 15px; height: 15px; margin-right: 3px" v-else-if="item.style.url" crossorigin="anonymous" />
                        <i class="el-icon-document" style="margin-right: 3px" v-else></i>
                        <span @click="componentClick(item)">{{ item.name == undefined ? item.type : item.name }}</span>
                        <i class="el-icon-view" style="margin-left: 5px; color: #21cc96" v-if="item.style.visible == undefined ? true : item.style.visible" @click="visibleClick(item)"></i>
                        <i class="el-icon-view" style="margin-left: 5px; color: #909399" v-else @click="visibleClick(item)"></i>
                        <i class="el-icon-edit" style="margin-left: 5px; color: #409eff" @click="nameUpdateClick(item)" v-if="configObject.identifier == item.identifier"></i>
                        <i class="el-icon-delete" style="margin-left: 5px; color: #e6a23c" @click="removeItem()" v-if="configObject.identifier == item.identifier"></i>
                    </div>
                </div>
            </div>
        </template>
        <!-- 界面背景设置 -->
        <template v-if="isLayer">
            <el-form class="topo-form">
                <el-form-item label="背景名称">
                    <el-input placeholder="请填写背景名称" v-model="topoData.name" size="small"></el-input>
                </el-form-item>
                <el-form-item label="分辨率">
                    <el-select v-model="layerWH" placeholder="请选择" size="small" style="width: 100%">
                        <el-option v-for="item in fblOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分辨率宽" v-if="layerWH == 'custom'">
                    <el-input-number placeholder="请填写分辨率宽" v-model="topoData.layer.width" size="small" :controls="false" :min="100" style="width: 180px" />
                </el-form-item>
                <el-form-item label="分辨率高" v-if="layerWH == 'custom'">
                    <el-input-number placeholder="请填写分辨率高" v-model="topoData.layer.height" size="small" :controls="false" :min="100" style="width: 180px" />
                </el-form-item>
                <el-form-item label="背景颜色">
                    <el-color-picker v-model="topoData.layer.backColor" show-alpha :predefine="predefineColors" color-format="hex" size="small" />
                </el-form-item>
                <el-form-item label="背景图片">
                    <div style="position: relative" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
                        <img v-if="topoData.layer.backgroundImage" :src="topoData.layer.backgroundImage" class="bgAvatar" @click="handleClick('背景图片')" crossorigin="anonymous" />
                        <i v-else class="el-icon-plus avatar-uploader-icon" @click="handleClick('背景图片')"></i>
                        <div class="iconHover" v-if="topoData.layer.backgroundImage && iconShow" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
                            <i class="el-icon-plus avatar-upload-icon" @click="handleClick('背景图片')"></i>
                            <i class="el-icon-delete avatar-delete-icon" @click="topoData.layer.backgroundImage = ''"></i>
                        </div>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="拖拽缩放">
                    <el-radio-group v-model="topoData.layer.dragZoom">
                        <el-radio label="true">开启</el-radio>
                        <el-radio label="false">不开启</el-radio>
                    </el-radio-group>
                </el-form-item> -->
            </el-form>
        </template>
        <el-dialog title="图库" :visible.sync="dialogVisible" width="1100px" :close-on-click-modal="false" append-to-body>
            <div class="dialogClass">
                <TopoSelectImage ref="topoSelectImage" />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="selectImageClick">确 定</el-button>
            </span>
        </el-dialog>
        <!--图片动画设置  -->
        <el-dialog :title="animationTitle" :visible.sync="animationDialog" width="550px" :close-on-click-modal="false" append-to-body v-dialogDrag v-if="configObject && configObject.componentShow.indexOf('动画') > -1">
            <el-form class="topo-form">
                <el-form-item label="变量名称">
                    <el-input placeholder="请选择变量" v-model="configObject.dataAction.paramName" readonly style="width: 380px">
                        <el-button slot="append" @click="selectVariable">选择</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="判断条件" prop="paramJudge">
                    <el-row>
                        <el-col :span="10" style="margin-right: 20px">
                            <el-select v-model="configObject.dataAction.paramJudge" clearable placeholder="请选择">
                                <el-option label="大于" value="大于" />
                                <el-option label="大于等于" value="大于等于" />
                                <el-option label="等于" value="等于" />
                                <el-option label="小于等于" value="小于等于" />
                                <el-option label="小于" value="小于" />
                                <el-option label="不等于" value="不等于" />
                            </el-select>
                        </el-col>
                        <el-col :span="10">
                            <el-input-number v-model="configObject.dataAction.paramJudgeData" clearable placeholder="请输入" :controls="false"></el-input-number>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="动画效果" v-if="clickText == '旋转'" prop="rotationSpeed">
                    <el-radio v-model="configObject.dataAction.rotationSpeed" label="快">快</el-radio>
                    <el-radio v-model="configObject.dataAction.rotationSpeed" label="中">中</el-radio>
                    <el-radio v-model="configObject.dataAction.rotationSpeed" label="慢">慢</el-radio>
                </el-form-item>
                <div v-if="clickText == '滑动'">
                    <el-form-item label="滑动配置">
                        <el-button icon="el-icon-plus" circle @click="addTranslate"></el-button>
                        <el-button icon="el-icon-delete" circle @click="deleteTranslate"></el-button>
                    </el-form-item>
                    <el-form-item label="滑动周期">
                        <el-input-number v-model="configObject.dataAction.duration" clearable placeholder="请输入滑动周期(秒)" :controls="false" style="align: center; margin-right: 10px; width: 320px"></el-input-number>
                    </el-form-item>
                    <el-form-item label="滑动位置" v-for="(item, index) in configObject.dataAction.translateList" :key="index">
                        <el-select v-model="item.direction" placeholder="请选择偏移方向" style="align: center; margin-right: 10px; width: 150px">
                            <el-option label="水平" value="水平" />
                            <el-option label="竖直" value="竖直" />
                        </el-select>
                        <el-input-number v-model="item.position" clearable placeholder="请输入偏移度" :controls="false" style="align: center; margin-right: 10px; width: 150px"></el-input-number>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="animationDialog = false">取 消</el-button>
                <el-button type="primary" @click="animationSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <!--事件单击设置  -->
        <el-dialog :title="singleClickTitle" :visible.sync="singleClickDialog" width="650px" v-if="configObject && configObject.componentShow.indexOf('单击') > -1" :close-on-click-modal="false" append-to-body>
            <el-form class="topo-form">
                <div v-show="false">
                    <el-form-item label="设备编号">
                        <el-input v-model="configObject.dataBind.imei" />
                    </el-form-item>
                    <el-form-item label="驱动名称">
                        <el-input v-model="configObject.dataBind.driveName" />
                    </el-form-item>
                    <el-form-item label="变量字段">
                        <el-input v-model="configObject.dataBind.paramField" />
                    </el-form-item>
                    <el-form-item label="数据类型">
                        <el-input v-model="configObject.dataBind.dataType" />
                    </el-form-item>
                </div>
                <el-form-item label="鼠标">
                    <el-radio-group v-model="configObject.dataBind.event">
                        <el-radio label="click">单击</el-radio>
                        <el-radio label="dblclick">双击</el-radio>
                        <el-radio label="mouseenter">移入</el-radio>
                        <el-radio label="mouseleave">移出</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="动作">
                    <el-radio-group v-model="configObject.dataBind.action" @change="handleRadioChange(configObject.dataBind.action)">
                        <el-radio label="操作变量">操作变量</el-radio>
                        <el-radio label="变量信息">变量信息</el-radio>
                        <el-radio label="外部链接">外部链接</el-radio>
                        <el-radio label="组态界面">组态界面</el-radio>
                        <el-radio label="开关控制" v-if="configObject.type == 'imageSwitch'">开关控制</el-radio>
                        <el-radio label="函数定义">函数定义</el-radio>
                        <el-radio label="组件显示">组件显示</el-radio>
                        <el-radio label="组件隐藏">组件隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="变量名称" v-if="configObject.dataBind.action == '操作变量' || configObject.dataBind.action == '开关控制' || configObject.dataBind.action == '变量信息'">
                    <el-input placeholder="请选择变量" v-model="configObject.dataBind.paramName" readonly style="width: 100%">
                        <el-button slot="append" @click="selectVariable">选择</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="写入值" v-if="configObject.dataBind.action == '操作变量'">
                    <el-input v-model="configObject.dataBind.paramValue" :controls="false" style="width: 100%" placeholder="为空即为可变值" />
                </el-form-item>
                <el-form-item label="提示信息" v-if="configObject.dataBind.action == '操作变量'">
                    <el-input v-model="configObject.dataBind.tipMsg" :controls="false" style="width: 100%" placeholder="请输入提示信息" />
                </el-form-item>
                <el-form-item label="跳转链接" v-if="configObject.dataBind.action == '外部链接'">
                    <el-input v-model="configObject.dataBind.redirectUrl" style="width: 100%" />
                </el-form-item>
                <el-form-item label="开关控制" v-if="configObject.dataBind.action == '开关控制'">
                    <el-radio v-model="configObject.dataBind.controValue" label="0关1开">0关1开</el-radio>
                    <el-radio v-model="configObject.dataBind.controValue" label="0开1关">0开1关</el-radio>
                    <el-radio v-model="configObject.dataBind.controValue" label="多态开关">多态开关</el-radio>
                </el-form-item>
                <el-form-item label="组态界面" v-if="configObject.dataBind.action == '组态界面'">
                    <el-select v-model="configObject.dataBind.ztPage" clearable placeholder="请选择" style="width: 100%" @change="selectZtPage">
                        <el-option :label="item.pageName" :value="item.guid" v-for="item in ztOption" :key="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="打开方式" v-if="configObject.dataBind.action == '组态界面'">
                    <el-radio v-model="configObject.dataBind.openModels" :label="1" @change="handleRadioChange(configObject.dataBind.action)">当前窗口打开</el-radio>
                    <el-radio v-model="configObject.dataBind.openModels" :label="2" @change="handleRadioChange(configObject.dataBind.action)">打开新窗口</el-radio>
                    <el-radio v-model="configObject.dataBind.openModels" :label="3" @change="handleRadioChange(configObject.dataBind.action)">弹出小窗口</el-radio>
                </el-form-item>
                <el-form-item label="窗口宽度" v-if="configObject.dataBind.openModels == '3'">
                    <el-input v-model="configObject.dataBind.windowWidth" style="width: 100%" />
                </el-form-item>
                <el-form-item label="窗口高度" v-if="configObject.dataBind.openModels == '3'">
                    <el-input v-model="configObject.dataBind.windowHeight" style="width: 100%" />
                </el-form-item>
                <el-form-item label="函数" v-if="configObject.dataBind.action == '函数定义'">
                    <el-input type="textarea" :rows="5" placeholder="请输入JavaScript脚本内容" v-model="configObject.dataBind.function" />
                </el-form-item>
                <el-form-item label="组件绑定" v-if="configObject.dataBind.action == '组件隐藏' || configObject.dataBind.action == '组件显示'">
                    <el-select v-model="configObject.dataBind.identifiers" multiple placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in topoData.components" :key="item.identifier" :label="item.name" :value="item.identifier"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="singleClickDialog = false">取 消</el-button>
                <el-button type="primary" @click="animationSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog width="1100px" title="变量选择" :visible.sync="variableDialog" append-to-body :close-on-click-modal="false">
            <TopoVariable ref="topoVariable" :multiple="multiple" :textStatic="textStatic" />
            <span slot="footer" class="dialog-footer">
                <el-button @click="variableDialog = false">取 消</el-button>
                <el-button type="primary" @click="selectVariableClick">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="数据引擎" :visible.sync="dialogTip" width="50%" append-to-body :close-on-click-modal="false" v-dialogDrag v-if="configObject" :fullscreen="dialogFull">
            <div>
                <div style="position: absolute; top: 20px; right: 50px" @click="handelFull">
                    <i class="el-icon-full-screen"></i>
                </div>
                <div style="font-size: 20px; margin-bottom: 20px">
                    <a href="https://www.isqqw.com/" target="_blank">Echarts图表合集-仅支持vue语法糖、数据引擎-echartData</a>
                    <i class="el-icon-info" @click="dialogExplain = true" style="color: #e6a23c; margin-left: 5px"></i>
                </div>
                <div class="box-message" style="max-height: 200px">
                    <el-input type="textarea" :autosize="{ minRows: 3 }" placeholder="请输入响应示例" v-model="configObject.dataBind.echartData"></el-input>
                </div>
                <div class="box-message">
                    <ace @input="aceInput" ref="ace" v-model="configObject.dataBind.echartOption" />
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="echartRunClick">运 行</el-button>
                <el-button @click="dialogTip = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title="数据引擎示例" :visible.sync="dialogExplain" width="30%" append-to-body :close-on-click-modal="false">
            <div class="box__message" v-html="topoUtil.getEchartExplain()"></div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogExplain = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title="3D模型" :visible.sync="dialogLoader" width="30%" append-to-body :close-on-click-modal="false" v-if="configObject">
            <ModelList :moduleName="configObject.name" :moduleGuid="configObject.identifier" @modelList="modelList" ref="modelList" />
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogLoader = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog title="重命名" :visible.sync="dialogVisibleRename" width="20%" :close-on-click-modal="false" append-to-body>
            <el-input v-model="renameValue" placeholder="请输入名称"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleRename = false">取 消</el-button>
                <el-button type="primary" @click="submitRename">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="公共配置" :visible.sync="dialogVisibleInterface" width="750px" append-to-body :close-on-click-modal="false" v-if="configObject">
            <div>
                请求地址：
                <el-select v-model="configObject.dataBind.method" placeholder="请选择" style="width: 90px; margin-right: 5px">
                    <el-option label="get" value="get"></el-option>
                    <el-option label="post" value="post"></el-option>
                    <el-option label="put" value="put"></el-option>
                </el-select>
                <el-input placeholder="例：http:127.0.0.1/" v-model="configObject.dataBind.url" style="width: 500px" />
            </div>
            <div style="margin-top: 20px">
                请求间隔：
                <el-input-number v-model="configObject.dataBind.interval" :controls="false" :min="0" style="width: 90px; margin-right: 5px"></el-input-number>
                <el-select v-model="configObject.dataBind.intervalType" placeholder="请选择" style="width: 90px">
                    <el-option label="秒" value="秒"></el-option>
                    <el-option label="分" value="分"></el-option>
                    <el-option label="时" value="时"></el-option>
                </el-select>
            </div>
            <div style="margin-top: 20px; overflow-y: auto">
                <el-tabs style="height: 350px" v-model="configObject.dataBind.requestType">
                    <el-tab-pane label="Params">
                        <el-table :data="configObject.dataBind.paramData" style="width: 100%">
                            <el-table-column type="index" width="50" />
                            <el-table-column label="key" prop="key">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="value" prop="value">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(configObject.dataBind.paramData)">+</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, configObject.dataBind.paramData)">-</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="Body">
                        <div style="margin-bottom: 10px">
                            <el-radio-group v-model="configObject.dataBind.contentType">
                                <el-radio :label="1">none</el-radio>
                                <el-radio :label="2">form-data</el-radio>
                                <el-radio :label="3">x-www-form-urlencoded</el-radio>
                                <el-radio :label="4">json</el-radio>
                                <el-radio :label="5">xml</el-radio>
                            </el-radio-group>
                        </div>
                        <el-empty description="该请求没有body体" v-if="configObject.dataBind.contentType == 1" :image-size="100"></el-empty>
                        <el-table :data="configObject.dataBind.bodyDataTable" style="width: 100%" v-else-if="configObject.dataBind.contentType == 2 || configObject.dataBind.contentType == 3">
                            <el-table-column type="index" width="50" />
                            <el-table-column label="key" prop="key">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="value" prop="value">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(configObject.dataBind.bodyDataTable)">+</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, configObject.dataBind.bodyDataTable)">-</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-input
                            type="textarea"
                            :rows="8"
                            placeholder="请输入内容"
                            v-model="configObject.dataBind.bodyDataArea"
                            v-else-if="configObject.dataBind.contentType == 4 || configObject.dataBind.contentType == 5"
                        ></el-input>
                    </el-tab-pane>
                    <el-tab-pane label="Header">
                        <el-table :data="configObject.dataBind.headerData" style="width: 100%">
                            <el-table-column type="index" width="50" />
                            <el-table-column label="key" prop="key">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.key"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="value" prop="value">
                                <template slot-scope="scope">
                                    <el-input placeholder="请输入" v-model="scope.row.value"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(configObject.dataBind.headerData)">+</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, configObject.dataBind.headerData)">-</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleInterface = false">取 消</el-button>
                <el-button type="primary" @click="submitInterface">保 存</el-button>
            </span>
        </el-dialog>

        <el-dialog title="请选择oid名称" :visible.sync="oidopen" width="500px" append-to-body>
            <el-select v-model="oid" placeholder="请选择oid名称">
                <el-option v-for="item in oidList" :key="item.id" :label="item.oidName" :value="item.oid"></el-option>
            </el-select>
            <div slot="footer" class="dialog-footer">
                <el-button @click="oidopen = false">取 消</el-button>
                <el-button type="primary" @click="oidSubmit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
import topoUtil from './util/topo-util';
import TopoSelectImage from './TopoSelectImage';
import TopoVariable from './TopoVariable';
import SetupAngle from './TopoAngle';
import ModelList from './model';
import { deepCopy } from '@/views/zutai/api/zutai/utils';
import { getToken } from '@/utils/auth';
import request from '@/utils/request';
import QIcon from '../QIcon/index.vue';

export default {
    name: 'TopoProperties',
    components: {
        QIcon,
        TopoSelectImage,
        TopoVariable,
        SetupAngle,
        ModelList,
    },
    data() {
        return {
            topoUtil: topoUtil,
            tabIndex: 0,
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577',
                '#ffffff',
                '#000',
            ],
            fontFamilyOptions: ['Arial', 'Helvetica', 'sans-serif', '宋体', '黑体', '微软雅黑'],
            textAlignOptions: ['left', 'right', 'center', 'justify'],
            borderStyleOptions: ['solid', 'dashed', 'dotted'],
            fblOptions: [
                {
                    value: '960x600',
                    label: '小屏幕:960x600',
                },
                {
                    value: '1024x768',
                    label: '小屏幕:1024x768',
                },
                {
                    value: '选项3',
                    label: '小屏幕:1280x1024',
                },
                {
                    value: '1366x768',
                    label: 'PC网页:1366x768',
                },
                {
                    value: '1440x900',
                    label: 'PC网页:1440x900',
                },
                {
                    value: '1920x960',
                    label: 'PC网页:1920x960',
                },
                {
                    value: '1920x1080',
                    label: 'PC网页:1920x1080',
                },
                {
                    value: '2048x858',
                    label: '2K屏幕:2048x858',
                },
                {
                    value: '2048x1080',
                    label: '2K屏幕:2048x1080',
                },
                {
                    value: '3840x2160',
                    label: '4K屏幕:3840x2160',
                },
                {
                    value: '3656x2664',
                    label: '2K屏幕:3656x2664',
                },
                {
                    value: '4096x3112',
                    label: '4K屏幕:4096x3112',
                },
                {
                    value: 'custom',
                    label: '自定义',
                },
            ],
            layerWHTemp: '',
            dialogVisible: false,
            //当前的选择图片
            baseApi: '/prod-api',
            currentInput: '',
            bindParams: [],
            animationTitle: '动画设置',
            animationDialog: false,
            animationForm: {},
            clickText: '',

            singleClickTitle: '事件设置',
            singleClickDialog: false,

            //变量选择
            deviceImei: this.$route.query.deviceImei,
            variableDialog: false,

            //天气组件位置选择
            //省
            provinceList: [],
            //市
            cityList: [],
            //区
            districtList: [],
            slidePreview: null,

            //组态页面集合
            ztOption: [],

            //变量选择： false单选 true多选
            multiple: false,
            textStatic: '',
            ztModelOption: [],
            paramNameList: [
                '设备总数',
                '设备在线数',
                '设备离线数',
                '设备报警数',
                '在线比率',
                '日报警总数',
                '日报警已处理',
                '日报警未处理',
                '日报警处理比率',
                '周报警总数',
                '周报警已处理',
                '周报警未处理',
                '周报警处理比率',
                '月报警总数',
                '月报警已处理',
                '月报警未处理',
                '月报警处理比率',
                '年报警已处理',
                '年报警未处理',
                '年报警处理比率',
                '日工单总数',
                '日工单已处理',
                '日工单未处理',
                '日工单处理比率',
                '周工单总数',
                '周工单已处理',
                '周工单未处理',
                '周工单处理比率',
                '月工单总数',
                '月工单已处理',
                '月工单未处理',
                '月工单处理比率',
                '年工单总数',
                '年工单已处理',
                '年工单未处理',
                '年工单处理比率',
            ],
            bDeviceZtBindList: [],
            dialogTip: false,
            echartData: '',
            dialogExplain: false,
            dialogFull: false,
            angleStyle: {
                opacity: 0.1,
            },
            debouncedWatch: null,
            dialogLoader: false,

            //画布图层
            dialogVisibleRename: false,
            renameValue: '',
            renameItem: {},
            componentBackColor: '',
            //VR
            selectItem: {},
            iconShow: false,
            //折叠面板
            activeNames: ['2'],
            //接口配置
            dialogVisibleInterface: false,
            //视频列表
            videoOption: [],
            //对象变化，防止过多变化到历史记录里
            timer: null,
            //摄像头设备选择
            devicesxt: null,

            oid: null,
            oidName: null,
            oidopen: false,
            oidList: [],
        };
    },
    computed: {
        layerWH: {
            get: function (val) {
                // console.log("val",this.layerWHTemp);
                if (this.layerWHTemp == 'custom') {
                    return 'custom';
                } else {
                    return this.topoData.layer.width + 'x' + this.topoData.layer.height;
                }
            },
            set: function (val) {
                this.layerWHTemp = val;
                if (val == 'custom') {
                    this.topoData.layer.width = 1920;
                    this.topoData.layer.height = 1080;
                } else {
                    var wh = val.split('x');
                    this.topoData.layer.width = parseInt(wh[0]);
                    this.topoData.layer.height = parseInt(wh[1]);
                }
            },
        },
        ...mapState({
            topoData: (state) => state.topoEditor.topoData,
            selectedComponents: (state) => state.topoEditor.selectedComponents,
            selectedComponentMap: (state) => state.topoEditor.selectedComponentMap,
            isLayer: (state) => state.topoEditor.selectedIsLayer,
            configObject: (state) => state.topoEditor.selectedComponent,
            historyData: (state) => state.topoEditor.historyData,
            historyDataMark: (state) => state.topoEditor.historyDataMark,
            batchModel: (state) => state.batchModel,
        }),
        animations() {
            let items = [];
            items =
                this.configObject.direction && this.configObject.direction == 'vertical'
                    ? [
                          { label: '向上', value: 'up' },
                          { label: '向下', value: 'down' },
                      ]
                    : [
                          {
                              label: '向右',
                              value: 'right',
                          },
                          { label: '向左', value: 'left' },
                      ];
            return items;
        },
        provinceCode() {
            // console.log("configObject",this.configObject);
            if (this.configObject != null) {
                this.provinceChange(this.configObject.dataBind.provinceCode);
                this.cityChange(this.configObject.dataBind.cityCode);
            }
        },
    },
    watch: {
        'configObject.style': {
            handler(newVal, oldVal) {
                if (newVal) {
                    clearTimeout(this.timer);
                    this.timer = null;
                    this.timer = setTimeout(() => {
                        this.historyData.push(deepCopy(this.topoData));
                        this.setHistoryDataMark(this.historyDataMark + 1);
                    }, 100);
                }
            },
            deep: true,
        },
    },
    mounted() {
        this.getZtPage();
        this.getZtModel();
        this.getProvinceList();
        this.getDeviceList();
        this.getVideoList();

        this.getOidList();
    },
    beforeDestroy() {
        clearTimeout(this.timer);
        this.timer = null;
    },
    methods: {
        // 选择oid后
        oidSubmit() {
            this.oidopen = false;
            this.configObject.dataBind.oid = this.oid;

            this.oidList.filter((item) => {
                if (item.oid === this.oid) {
                    this.configObject.dataBind.oidName = item.oidName;
                }
            });

            let url = '/data/response/list';
            let queryParams = {
                oid: this.oid,
                pageNum: 1,
                pageSize: 10,
            };
            request({
                url: url,
                method: 'get',
                params: queryParams,
            }).then((res) => {
                this.configObject.dataBind.SNMPList = res.rows;
                this.configObject.dataBind.total = res.total;
            });
        },
        // 获取所有oid
        getOidList() {
            let url = '/data/response/list';
            let queryParams = {
                oid: null,
                pageNum: 1,
                pageSize: 10,
            };
            request({
                url: url,
                method: 'get',
                params: queryParams,
            }).then((res) => {
                this.oidList = res.rows;
            });
        },
        // 选择oid
        selectOid() {
            this.oidopen = true;
        },
        ...mapMutations('topoEditor', ['setSelectedComponent', 'setLayerSelected', 'execute', 'setHistoryDataMark']),
        handleRadioChange(tab) {
            console.log(tab);
            if (tab != '组态界面') {
                this.configObject.dataBind.openModels = 0;
            }
        },
        getVideoList() {
            let query = {
                pageNum: 1,
                pageSize: 999,
                ztGuid: this.$route.query.guid,
            };
            let url = '/zutai/bDeviceVideo/listzt';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((res) => {
                console.log(res.rows);
                this.videoOption = res.rows;
            });
        },
        //公共配置开始
        handleEdit(row) {
            let data = {
                key: '',
                value: '',
            };
            row.push(data);
        },
        handleDelete(xh, row) {
            if (row.length == 1) {
                return;
            }
            row.forEach((element, index) => {
                if (index == xh) {
                    row.splice(index, 1);
                }
            });
        },
        submitInterface() {
            this.$emit('printData');
            this.dialogVisibleInterface = false;
        },
        sendHttpRequest() {
            // console.log('发起请求',this.configObject.dataBind);
            let url = this.configObject.dataBind.url;
            let method = this.configObject.dataBind.method;
            let data = {};
            let bodyDataTable = this.configObject.dataBind.bodyDataTable;
            for (let itemindex = 0; itemindex < bodyDataTable.length; itemindex++) {
                //$set()方法第一个参数是对象，第二个参数是key值，第三个参数是value值
                if (bodyDataTable[itemindex].key) {
                    this.$set(data, bodyDataTable[itemindex].key, bodyDataTable[itemindex].value);
                }
            }
            let contentType = '';
            if (this.configObject.dataBind.contentType == 2) {
                contentType = 'multipart/form-data';
            } else if (this.configObject.dataBind.contentType == 3) {
                contentType = 'application/x-www-form-urlencoded;charset=utf-8';
            } else if (this.configObject.dataBind.contentType == 4) {
                contentType = 'application/json;charset=utf-8';
                data = this.configObject.dataBind.bodyDataArea;
            } else if (this.configObject.dataBind.contentType == 5) {
                contentType = 'text/xml';
                data = this.configObject.dataBind.bodyDataArea;
            } else {
                contentType = 'application/json;charset=utf-8';
                data = {};
            }
            let postUrl = '/zutai/bEchartType/sendHttpRequest';
            let postData = {
                url: url,
                method: method,
                contentType: contentType,
                params: this.configObject.dataBind.paramData,
                headers: [
                    ...this.configObject.dataBind.headerData,
                    {
                        key: 'Authorization',
                        value: 'Bearer ' + getToken(),
                    },
                ],
                data: JSON.stringify(data),
                // sql:"select * from b_device_manager"
            };
            request({
                url: postUrl,
                method: 'post',
                data: postData,
            }).then((res) => {
                console.log('sendHttpRequest-获取成功!', res);
                if (res.code == 200) {
                    this.echartData = res.data;
                    this.configObject.dataBind.echartData = res.data;
                }
            });
        },
        //公共配置结束
        //轮播图
        carouselChange(style) {
            if (style.carouselNum > style.carouselImageList.length) {
                style.carouselImageList.push('');
            } else if (style.carouselNum < style.carouselImageList.length) {
                style.carouselImageList.splice(style.carouselNum, 1);
            }
        },
        //组件删除
        removeItem() {
            this.execute({ op: 'del' });
            this.setLayerSelected(true);
        },
        //修改组件名称
        nameUpdateClick(item) {
            this.renameItem = item;
            this.renameValue = this.renameItem.name == undefined ? this.renameItem.type : this.renameItem.name;
            this.dialogVisibleRename = true;
        },
        submitRename() {
            this.renameItem.name = this.renameValue;
            this.dialogVisibleRename = false;
        },
        //组件旋转
        componentClick(item) {
            this.setSelectedComponent(item);
            this.setLayerSelected(false);
        },
        //组件显示隐藏
        visibleClick(item) {
            if (item.style.visible == true) {
                item.style.visible = false;
            } else {
                item.style.visible = true;
            }
        },
        modelUploadClick() {
            this.dialogLoader = true;
            setTimeout(() => {
                this.$refs.modelList.getList();
            }, 200);
        },
        modelList(modelList) {
            console.log('modelList', modelList);
            this.configObject.loader.filePath = modelList;
            this.configObject.loader.position = [];
            this.configObject.loader.rotation = [];
            this.configObject.loader.scale = [];
            modelList.forEach((element, index) => {
                this.configObject.loader.position.push({
                    x: 0,
                    y: 0,
                    z: 0,
                });
                this.configObject.loader.rotation.push({
                    x: 0,
                    y: 0,
                    z: 0,
                });
                this.configObject.loader.scale.push({
                    x: 1,
                    y: 1,
                    z: 1,
                });
            });
        },
        mouseEnter() {
            (this.angleStyle = {
                opacity: 0.8,
            }),
                (this.iconShow = true);
        },
        mouseLeave() {
            this.angleStyle = {
                opacity: 0.1,
            };
            this.iconShow = false;
        },
        //增加滑动位置
        addTranslate() {
            let id = this.configObject.dataAction.translateList.length;
            console.log(this.configObject.dataAction.translateList);
            let state = {
                id: id + 1,
                direction: '',
                position: 0,
            };
            this.configObject.dataAction.translateList.push(state);
        },
        //删除滑动位置
        deleteTranslate() {
            let id = this.configObject.dataAction.translateList.length;
            this.configObject.dataAction.translateList.some((item, i) => {
                if (item.id == id) {
                    this.configObject.dataAction.translateList.splice(i, 1);
                    return true;
                }
            });
        },
        handelFull() {
            if (this.dialogFull) {
                this.dialogFull = false;
                this.$refs.ace.setMaxLines(20);
            } else {
                this.dialogFull = true;
                this.$refs.ace.setMaxLines(35);
            }
        },
        //ace编辑器
        aceInput(data) {
            //console.log('ace编辑器',data);
            this.configObject.dataBind.echartOption = data;
        },
        //旋转角度
        onAngle(angle) {
            // console.log('旋转角度：',angle);
            this.transform('自定义旋转角度', angle);
        },
        //echats数据引擎
        echartHttpClick(dataUrl) {
            let query = {
                url: dataUrl,
            };
            let url = '/ignoreToken/getEchartData';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((response) => {
                console.log('获取图表数据', response.data);
                this.configObject.dataBind.echartData = JSON.stringify(JSON.parse(JSON.stringify(response.data)), null, '\t');
            });
        },
        //echart运行代码视图
        echartRunClick() {
            this.configObject.dataBind.echartRun = new Date().getTime();
            this.$message.success('运行成功');
            this.dialogTip = false;
        },
        //echart代码视图
        echartClick() {
            this.dialogTip = true;
            this.$nextTick(() => {
                if (this.dialogFull) {
                    this.$refs.ace.setMaxLines(35);
                } else {
                    this.$refs.ace.setMaxLines(20);
                }
            });
        },
        //增加状态开关
        addSwitch() {
            let id = this.configObject.dataBind.stateList.length;
            let state = {
                id: id + 1,
                paramCondition: '',
                paramData: '',
                imageUrl: '',
            };
            this.configObject.dataBind.stateList.push(state);
        },
        deleteSwitch() {
            let id = this.configObject.dataBind.stateList.length;
            this.configObject.dataBind.stateList.some((item, i) => {
                if (item.id == id) {
                    this.configObject.dataBind.stateList.splice(i, 1);
                    return true;
                }
            });
        },
        //增加状态字段
        addText() {
            let id = this.configObject.dataBind.stateTextList.length;
            let state = {
                id: id + 1,
                paramCondition: '',
                paramData: '',
                paramText: '',
            };
            this.configObject.dataBind.stateTextList.push(state);
        },
        deleteText() {
            let id = this.configObject.dataBind.stateTextList.length;
            this.configObject.dataBind.stateTextList.some((item, i) => {
                if (item.id == id) {
                    this.configObject.dataBind.stateTextList.splice(i, 1);
                    return true;
                }
            });
        },
        deviceChange() {
            this.getDeviceList();
        },
        getDeviceList() {
            let url = '/zutai/bDeviceZtBind/getDeviceBind';
            let param = {
                ztGuid: this.$route.query.guid,
            };
            request({
                url: url,
                method: 'get',
                params: param,
            }).then((res) => {
                // console.log('获取成功!',res);
                if (res.code == 200) {
                    this.bDeviceZtBindList = res.rows;
                }
            });
        },
        getProvinceList() {
            let param = {
                lvl: 1,
            };
            let url = '/zutai/bDeviceManager/getArea';
            request({
                url: url,
                method: 'get',
                params: param,
            }).then((res) => {
                this.provinceList = res.data;
            });
        },
        selectModelChange() {
            this.ztModelOption.forEach((element) => {
                if (element.imageUrl == this.configObject.imageUrl) {
                    this.configObject.modelUrl = element.modelUrl;
                }
            });
        },
        getZtModel() {
            let query = {
                pageNum: 1,
                pageSize: 999,
                status: 0,
            };
            let url = '/zutai/bDeviceModel/list';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((res) => {
                this.ztModelOption = res.rows;
            });
        },
        stack(val) {
            // console.log("topoData", this.configObject);
            if (this.configObject) {
                let zIndex = 0;
                if (val == '置顶') {
                    zIndex = 999;
                    this.topoData.zIndexTop = zIndex;
                } else if (val == '置底') {
                    zIndex = -999;
                    this.topoData.zIndexBottom = zIndex;
                } else if (val == '上一层') {
                    zIndex = this.configObject.style.zIndex == undefined ? 1 : this.configObject.style.zIndex + 1;
                } else if (val == '下一层') {
                    zIndex = this.configObject.style.zIndex == undefined ? 1 : this.configObject.style.zIndex - 1;
                }
                for (var key in this.selectedComponentMap) {
                    var component = this.selectedComponentMap[key];
                    component.style.zIndex = zIndex;
                }
            }
        },
        transform(val, value) {
            if (this.configObject) {
                let transform = '';
                let transformType = '';
                if (val == '顺时针旋转') {
                    transform = this.configObject.style.transform + 90;
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '逆时针旋转') {
                    transform = this.configObject.style.transform - 90;
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '水平镜像') {
                    transform = 0;
                    transformType = `rotateY(180deg)`;
                } else if (val == '垂直镜像') {
                    transform = 0;
                    transformType = `rotateX(180deg)`;
                } else if (val == '自定义角度' && value) {
                    transform = this.configObject.style.transform + parseInt(value);
                    transformType = `rotate(` + transform + `deg)`;
                } else if (val == '自定义旋转角度' && value) {
                    transform = parseInt(value);
                    transformType = `rotate(` + transform + `deg)`;
                }
                // this.configObject.style.transform=transform;
                // this.configObject.style.transformType=transformType;
                // console.log("旋转格式",this.configObject.style.transformType);
                for (var key in this.selectedComponentMap) {
                    var component = this.selectedComponentMap[key];
                    component.style.transform = transform;
                    component.style.transformType = transformType;
                }
            }
        },
        selectZtPage() {
            console.log('初始化界面名称', this.configObject.dataBind.ztPage);
            this.ztOption.forEach((element) => {
                if (element.guid == this.configObject.dataBind.ztPage) {
                    this.configObject.dataBind.ztPageName = element.pageName;
                }
            });
        },
        getZtPage() {
            let query = {
                pageNum: 1,
                pageSize: 999,
                //deviceMac:this.$route.query.deviceImei,
            };
            let url = '/zutai/bDeviceZt/list';
            request({
                url: url,
                method: 'get',
                params: query,
            }).then((res) => {
                this.ztOption = res.rows;
            });
        },
        createCode() {
            var code = '';
            //设置长度，这里看需求，我这里设置了4
            var codeLength = 4;

            //设置随机字符
            var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);

            //循环codeLength 我设置的4就是循环4次
            for (var i = 0; i < codeLength; i++) {
                //设置随机数范围,这设置为0 ~ 36
                var index = Math.floor(Math.random() * 9);

                //字符串拼接 将每次随机的字符 进行拼接
                code += random[index];
            }

            //将拼接好的字符串赋值给展示的code
            return code;
        },
        provinceChange(item) {
            let param = {
                provinceZh: item,
                lvl: 2,
            };
            let url = '/zutai/bDeviceManager/getArea';
            request({
                url: url,
                method: 'get',
                params: param,
            }).then((res) => {
                this.cityList = res.data;
            });
        },
        cityChange(item) {
            let param = {
                leaderZh: item,
                lvl: 3,
            };
            let url = '/zutai/bDeviceManager/getArea';
            request({
                url: url,
                method: 'get',
                params: param,
            }).then((res) => {
                this.districtList = res.data;
            });
        },
        selectVariableClick() {
            this.variableDialog = false;
            let selectRowData = null;
            if (this.clickText == '多参数绑定') {
                selectRowData = this.$refs.topoVariable.selectRowsDataClick();
                console.log('多参数绑定', selectRowData);
            } else {
                selectRowData = this.$refs.topoVariable.selectRowDataClick();
                console.log('单参数绑定', selectRowData, this.clickText);
            }
            // console.log('选中的记录',selectRowData);
            if (this.clickText == '闪烁' || this.clickText == '旋转' || this.clickText == '显隐' || this.clickText == '滑动') {
                this.configObject.dataAction.imei = selectRowData.deviceImei;
                this.configObject.dataAction.paramField = selectRowData.paramField;
                this.configObject.dataAction.paramName = selectRowData.paramName;
                this.configObject.dataAction.acquisitionFormula = selectRowData.acquisitionFormula;
                this.configObject.dataAction.writeFormula = selectRowData.writeFormula;
                this.configObject.dataAction.readWriteType = selectRowData.readWriteType;
            } else if (this.clickText == '参数绑定') {
                this.configObject.dataBind.paramField = selectRowData.paramField;
                this.configObject.dataBind.paramName = selectRowData.paramName;
                this.configObject.dataBind.acquisitionFormula = selectRowData.acquisitionFormula;
                this.configObject.dataBind.writeFormula = selectRowData.writeFormula;
                this.configObject.dataBind.readWriteType = selectRowData.readWriteType;
                if (selectRowData.paramUnit) {
                    this.configObject.dataBind.paramUnit = selectRowData.paramUnit;
                }
                this.configObject.dataBind.imei = selectRowData.deviceImei;
                this.configObject.dataBind.driveName = selectRowData.driveName;
                this.configObject.dataBind.dataType = selectRowData.dataType;
                console.log('参数绑定', selectRowData);
            } else if (this.clickText == '单击') {
                console.log('单击选择', selectRowData);
                this.configObject.dataBind.paramField = selectRowData.paramField;
                this.configObject.dataBind.paramName = selectRowData.paramName;
                this.configObject.dataBind.imei = selectRowData.deviceImei;
                this.configObject.dataBind.driveName = selectRowData.driveName;
                this.configObject.dataBind.dataType = selectRowData.dataType;
                this.configObject.dataBind.acquisitionFormula = selectRowData.acquisitionFormula;
                this.configObject.dataBind.writeFormula = selectRowData.writeFormula;
                this.configObject.dataBind.readWriteType = selectRowData.readWriteType;
            } else if (this.clickText == '多参数绑定') {
                console.log('多参数绑定', selectRowData);
                this.configObject.style.header = selectRowData;
                this.configObject.dataBind.paramName = selectRowData.join(',');
                // this.configObject.dataBind.imei = selectRowData.deviceImei;
            } else if (this.clickText == 'VR参数绑定') {
                this.selectItem.dataBind.paramField = selectRowData.paramField;
                this.selectItem.dataBind.acquisitionFormula = selectRowData.acquisitionFormula;
                this.selectItem.dataBind.writeFormula = selectRowData.writeFormula;
                this.selectItem.dataBind.imei = selectRowData.deviceImei;
                if (selectRowData.paramUnit) {
                    this.selectItem.dataBind.paramUnit = selectRowData.paramUnit;
                }
                this.selectItem.dataBind.paramName = selectRowData.paramName;
                this.configObject.selectVRId = this.selectItem.id + '&' + this.selectItem.dataBind.paramName + '&' + this.selectItem.vrUrl;
            }
        },
        selectVariable(val, item) {
            console.log(val);
            if (val == '参数绑定') {
                console.log(this.configObject.type);
                if (this.configObject.type == 'realData') {
                    this.multiple = true;
                    this.clickText = '多参数绑定';
                    this.textStatic = '';
                } else if (this.configObject.type == 'textStatic') {
                    this.multiple = true;
                    this.clickText = '多参数绑定';
                    this.textStatic = '数统计';
                } else {
                    this.multiple = false;
                    this.clickText = val;
                }
            }
            if (item) {
                this.selectItem = item;
                this.multiple = false;
                this.clickText = val;
            }
            // console.log("multiple",this.multiple);
            this.variableDialog = true;
        },
        configClick(val) {
            if (val == '单击') {
                this.singleClickDialog = true;
            } else {
                this.animationDialog = true;
            }
            this.clickText = val;
        },
        animationSubmit() {
            this.animationDialog = false;
            this.singleClickDialog = false;
            this.$emit('printData');
        },
        handleClick(label, item) {
            this.currentInput = label;
            this.dialogVisible = true;
            if (item) {
                this.selectItem = item;
            }
        },
        selectImageClick() {
            let selectImage = this.$refs.topoSelectImage.handleChoice()[this.$refs.topoSelectImage.handleChoice().length - 1];
            this.dialogVisible = false;
            // console.log("选中图片",selectImage)

            if (this.currentInput == '背景图片') {
                this.topoData.layer.backgroundImage = this.baseApi + selectImage.resourceUrl;
            } else if (this.currentInput == '图片路径') {
                this.configObject.style.url = this.baseApi + selectImage.resourceUrl;
            } else if (this.currentInput == '开关状态(关)') {
                this.configObject.dataBind.shutImageUrl = this.baseApi + selectImage.resourceUrl;
            } else if (this.currentInput == '开关状态(开)') {
                this.configObject.dataBind.openImageUrl = this.baseApi + selectImage.resourceUrl;
            } else if (this.currentInput == '开关状态(报警)') {
                this.configObject.dataBind.warnImageUrl = this.baseApi + selectImage.resourceUrl;
            } else if (this.currentInput.indexOf('状态开关') > -1) {
                let id = this.currentInput.split('-')[1];
                this.configObject.dataBind.stateList.forEach((element) => {
                    if (element.id == id) {
                        element.imageUrl = this.baseApi + selectImage.resourceUrl;
                    }
                });
            } else if (this.currentInput == '图片锚点') {
                this.selectItem.vrUrl = this.baseApi + selectImage.resourceUrl;
                this.configObject.selectVRId = this.selectItem.id + '&' + this.selectItem.dataBind.paramName + '&' + this.selectItem.vrUrl;
            } else if (this.currentInput.indexOf('轮播图片') > -1) {
                let index = parseInt(this.currentInput.split('-')[1]);
                this.configObject.style.carouselImageList[index] = this.baseApi + selectImage.resourceUrl;
            }
        },
        dialogClick() {
            //this.dialogVisible=true;
        },
        initPage(configData) {
            this.configData = configData;
        },
        changeTab(tabIndex) {
            console.log(this.configObject);
            this.tabIndex = tabIndex;
        },
        bindData(configObject, index, isLayer) {
            this.configObject = configObject;
            this.isLayer = isLayer;
            if (isLayer === false) {
            }
        },
        generateTargetComponentOptions() {
            var options = [];
            this.topoData.components.forEach((component) => {
                if (this.configObject.identifier != component.identifier) {
                    options.push({
                        label: component.name || component.type,
                        value: component.identifier,
                    });
                }
            });
            return options;
        },
        removeAction(index) {
            this.configObject.action.splice(index, 1);
        },
        addAction() {
            var action = {
                type: 'click',
                action: '开关控制',
                showItems: [],
                hideItems: [],
            };
            this.configObject.action.push(action);
        },
        //摄像头的
        handleChangedevsxt(tab) {
            if (tab == null) {
                return;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.topo-properties {
    margin-bottom: 0px !important;
    .el-form.topo-form {
        padding: 1em 2em;

        .el-form-item {
            margin-bottom: 1em !important;
            ::v-deep .el-form-item__label {
                color: #606266 !important;
                //line-height: 24px;
            }
        }
    }
}

.title {
    text-align: center;
    background-color: #666;
    font-size: 20px;
    color: #fff;
}

.dialogClass {
    height: 550px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.topo-properties {
    border: #e6e6e6 solid 1px;
    //background-color: #f1f3f4;
    background-color: #fff;
    overflow-x: auto;
    // box-shadow: #C6BABA 0px 0px 20px;
    width: 100%;
    height: calc(100vh - 61px);

    .topo-properties-tabs {
        height: 48px;
        display: flex;
        //border-bottom: #ccc solid 1px;
        //background-color: #f1f3f4;

        .topo-properties-tab {
            height: 48px;
            text-align: center;
            line-height: 48px;
            flex: 1;
            font-size: 14px;
            //color: #666;
        }

        .topo-properties-tab + .topo-properties-tab {
            //border-left: #ccc solid 1px;
        }

        .topo-properties-tab:hover {
            cursor: pointer;
        }

        .topo-properties-tab-active {
            color: var(--primary-color);
            border-bottom: var(--primary-color) solid 2px;
            font-weight: bold;
        }
    }

    .topo-properties-table {
        overflow-x: hidden;
        overflow-y: auto;
        height: calc(100% - 92px);
    }

    .not-surpport {
        margin: 20px auto;
        text-align: center;
        font-size: 18px;
    }
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 100px;
    background-color: rgb(104, 102, 102);
    line-height: 100px;
    margin-right: 15px;
    text-align: center;
}

.avatar-switch {
    width: 30px;
    height: 30px;
}

.avatar-uploader-icon-switch {
    font-size: 20px;
    color: #8c939d;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

.bgAvatar {
    width: 100%;
    height: 100px;
    margin: 0 10px 10px 10px;
}

.avatar {
    width: 30px;
    height: 30px;
    margin: 0 10px 10px 10px;
}

.vrAvatar {
    width: 40px;
    height: 40px;
    padding: 5px;
}

.tab-index-2 {
    font-size: 12px;
    font-weight: 400;
    color: #7f838c;
    line-height: 18px;
    padding: 5px;
}

.tab-index-3 {
    font-size: 14px;
    font-weight: 400;
    color: #7f838c;
    line-height: 20px;
    width: auto;
    max-width: 100%;
    padding: 3px;
    //background-color: #f1f3f4;
    margin-bottom: 3px;
    margin-left: 10px;
}

.tab-index-3:hover {
    cursor: pointer;
}

.iconHover {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #fff;
    width: 100%;
    height: 100px;
    opacity: 0.5;
    text-align: center;
    line-height: 100px;
}

.avatar-delete-icon {
    font-size: 25px;
    color: red;
    text-align: center;
    margin-left: 10px;
    cursor: pointer;
}

.avatar-upload-icon {
    font-size: 25px;
    color: #67c23a;
    text-align: center;
    cursor: pointer;
}
</style>
<style>
.topo-properties .el-collapse-item__content {
    padding-bottom: 5px !important;
}

.topo-properties .el-input-number .el-input__inner {
    text-align: left !important;
    border-width: 1px;
    /* background: #f1f3f4 !important; */
}

.topo-properties .el-input-number--small {
    width: 100%;
}

.topo-properties-table::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.topo-properties-table::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    position: absolute;
}

.topo-properties-table::-webkit-scrollbar-track {
    background-color: #ddd;
}

.box-message {
    text-align: left;
    overflow-y: auto;
    margin-bottom: 10px;
}

.box-message .el-textarea__inner {
    background-color: #eef2f6;
}

.box-message ::-webkit-scrollbar-thumb {
    background-color: #ddd;
}

.box-message ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    position: absolute;
}

.box-message ::-webkit-scrollbar-track {
    background-color: #ddd;
}

.box__message {
    padding: 20px;
    border: 1px solid #f4dfb6;
    background: #fffbf4;
    text-align: left;
    height: 500px;
    overflow-y: auto;
}

.tabClass {
    padding: 5px;
}

.tabClass .el-collapse-item__header {
    //background-color: #f1f3f4;
    color: #000;
    font-weight: 700;
    font-size: 12px;
    text-indent: 10px;
}

.tabClass .el-collapse-item__wrap {
    //background-color: #f1f3f4;
}

.tabClass .el-input__inner {
    //background-color: #f1f3f4;
}
</style>
